<!DOCTYPE html>

<html>
<head>
  <title>TogetherJS interactions</title>
  <meta name="description" content="">
  <meta name="author" content="Aaron Druck">
  <link rel="stylesheet" href="css/styles.css">
  
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.transit.min.js"></script>
  <script src="js/animations.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  
  

</head>
<body>
  
  <!-- Notifications -->
  <ul>
    <li><button onclick="participantEnter()">Participant enters notification</button>
    <li><button onclick="participantLeave()">Participant leaves notification</button>
    <li><button onclick="participantCursorRotateDown()">Participant cursor is down the page</button>
    <li><button onclick="participantCursorRotateUp()">Participant cursor is in same area of the page</button>
    <li><button onclick="participantTyping()">Participant is typing</button>
    <li><button onclick="windowPopOut()">Popout window</button>
    <li><button onclick="chatnotification()">Chat notification / no auto-dismiss</button> 
    <li><button onclick="transformPers()">Perspective</button>    
  </ul>
  
  <div id="canvas">

    <!-- participant box -->
    <div id="participant-box"> 
      <div id="participant-cursor">
        &#8593;
      </div>     
      Participant name box and cursor
      <div id="participant-typing"></div>
    </div>

    <!-- notification entered -->
    <div id="notification">
      Participant entered
    </div>
    
    <!-- notification left -->
    <div id="notification2">
      Participant left
    </div>
    
    <!-- chat notification -->
    <div id="notification3" onclick="closeNotification3();">
       Click to close chat
     </div>
  
    <div id="windowpopout"></div>
    
    <div id="dock">
      <div id="participant-avatar"></div>
    </div>
    
    <div id="notification-transform">
      
    </div>
  
  </div>
  
  

</body>
</html>
